<template>
  <div class="fancy-list" :style="{ height }">
    <template v-if="refresh">
      <VanPullRefresh v-model="refreshing" @refresh="onRefresh">
        <VanList
          v-model:loading="loading"
          :finished="finished"
          finishedText="没有更多了"
          @load="onLoad"
        >
          <template #default>
            <!-- 通过 v-bind="item" 将 data 数组中的每一项的属性全都作为数据传递给插槽内容 -->
            <slot name="default" v-for="(item, index) in data" :key="index" v-bind="item" />
          </template>
        </VanList>
      </VanPullRefresh>
    </template>

    <template v-else>
      <VanList
        v-model:loading="loading"
        :finished="finished"
        finishedText="没有更多了"
        @load="onLoad"
      >
        <template #default>
          <!-- 通过 v-bind="item" 将 data 数组中的每一项的属性全都作为数据传递给插槽内容 -->
          <slot name="default" v-for="(item, index) in data" :key="index" v-bind="item" />
        </template>
      </VanList>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

export interface IParams {
  pageNum: number
  pageSize: number
}

defineOptions({
  name: 'FancyList'
})

const props = withDefaults(
  defineProps<{
    refresh?: boolean
    height?: string
    request: (params: IParams) => Promise<{ list: any[]; total: number }>
  }>(),
  {
    refresh: false,
    height: '100%'
  }
)

const data = ref<any[]>([]) // 列表数据
const pageNum = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示条数
const refreshing = ref(false) // 是否下拉刷新中
const loading = ref(false) // 是否请求中
const finished = ref(false) // 是否全部数据加载完成

// 加载数据的函数
const onLoad = async () => {
  // 调用父组件传递过来的 request 用于获取数据
  const { list, total } = await props.request({ pageNum: pageNum.value, pageSize: pageSize.value })

  if (refreshing.value) {
    // 清空数据，且将 refreshing 设置为false
    data.value = []
    refreshing.value = false
  }

  // 将获取到的列表数据追加到data
  data.value = [...data.value, ...list]

  // 加载状态结束
  loading.value = false

  // 要根据 total 与 当前 data 的总长度判断是否还有更多
  if (data.value.length >= total) {
    finished.value = true
  }

  // 将 pageNum++
  pageNum.value++
}

const onRefresh = () => {
  // 1. 将 finished 设置为 false
  finished.value = false
  // 2. 将 loading 设置为 true
  loading.value = true
  // 3. 将 pageNum 设置为 1
  pageNum.value = 1
  onLoad()
}
</script>

<style lang="scss" scoped>
.fancy-list {
  overflow-y: auto;
}
</style>
